
<!--定义模板-->
<template>
    <div id="todoList" class="container">
        <!--<button v-on:click="addTask" class="btn btn-primary m-3">添加</button>-->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <button class="btn btn-outline-secondary" type="button" v-on:click="addTask">添加</button>
            </div>
            <input type="text" id="task_content" class="form-control" placeholder="请输入任务内容" aria-label="" aria-describedby="basic-addon1">
        </div>
        <table class="table m-4">
            <thead>
            <th>任务</th>
            </thead>

            <tbody>
            <!--v-bind:key="task.id" 用于标定列的主键-->
            <!--vue为了性能考虑，默认复用页面上的dom元素。为了防止你的列表元素不更新，就要用key告诉vue，这些dom元素是不一样的。-->
            <!--<tr v-for="task in taskList" v-bind:key="task.id">-->
                <!--&lt;!&ndash;<td>{{task.id}} {{task.name}}</td>&ndash;&gt;-->
                <!--<td>{{task}}</td>-->
            <!--</tr>-->

            <!--使用虚拟数据渲染的内容-->
            <!--<tr v-for="task in parsedTaskList">-->
                <!--<td>{{ task }}</td>-->
            <!--</tr>-->

            <tr v-for="task in parsedTaskList">
                <td>
                    <!--如果超时了, 则添加删除线-->
                    <span v-if="isDone(task)" style="color:gray;text-decoration:line-through;">{{ task }}</span>
                    <span v-else >{{ task }}</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<!--样式-->
<style>
    .container{
        margin-top: 50px;
    }
</style>

<!--交互 script-->
<script>
    // 引用保存器
    import Store from './store.js';
    // 应用时间处理插件
    import * as moment from 'moment';

    const regex = /[0-9]+:[0-9]+/;
    /**
     * 该函数作用是解析出字符串中的时间，并将其跟当前时间比较，
     * 计算出还剩多久才会到达计划时间，将剩余时间拼接在字符串后。
     * 如果当前时间已经过了计划时间，则不对字符串做任何改变
     * 例子：
     * 23:40 回家 -> 23:40 回家 (还有 6 小时 36 分 15 秒)
     */
    // 写到 export 外的函数不会被暴露出去
    const addRemainTime = (task) => {
        let result = task.match(regex);
        if (result != null && result.length > 0) {
            let taskTime = result[0];
            let thisMoment = moment();
            let currentDate = thisMoment.format('YYYY-MM-DD');
            let taskMoment = moment(currentDate + " " + taskTime, 'YYYY-MM-DD HH:mm');
            if (taskMoment.valueOf() < thisMoment.valueOf()) {
                return task;
            }
            let duration = moment.duration(taskMoment.diff(thisMoment));
            let durationText = duration.hours() + " 小时 " + duration.minutes() + " 分 " + duration.seconds() + " 秒";
            return task + " (还有 " + durationText + ")";
        }
        return task;
    };

    export default {
        name: 'TodoList',
        data: function () {
            return {
                // taskList: []
                taskList: Store.fetch()
            }
        },
        methods: {
            // addTask: function(event) {
            //     this.taskList.push("新的待办任务");
            // }
            addTask: function(event) {
                // 获取任务内容
                let task_content = document.querySelector("#task_content");

                // 添加任务内容到任务列表中
                this.taskList.push(task_content.value);

                // 清空任务内容输入框
                task_content.value = '';
            },
            isDone: function (task) {
                let result = task.match(/还有\s[0-9]+\s小时\s[0-9]+\s分\s[0-9]+\s秒/);
                return result == null || result.length === 0;
            }
        },
        // 该属性的作用是当你改变某个属性的时候可以同时做一些其他的事情
        watch: {
            // 检测的属性
            taskList: {
                // 控制器
                handler: function (tasks) {
                    Store.save(tasks);
                }
            }
        },
        // 使用这个属性我们可以定义出“虚拟的”变量，这个变量并不在data中被实际的定义出来
        /*
         * method和computed有什么区别呢？
         * 这是我学习vue时最大的疑问，
         * 我觉得method和computed用法完全就没区别！
         * 其实他们的区别在于：computed是带缓存的，如果被依赖的变量不发生变化，则下次调用computed时不会重新计算结果。
         * 但是method则是每次调用都会重新运行以得出实时的结果
         */
        computed: {
            parsedTaskList: function () {
                let parsedTaskList = [];
                for (let i=0; i<this.taskList.length; i++) {
                    parsedTaskList.push(addRemainTime(this.taskList[i]));
                }
                return parsedTaskList;
            }
        },
    }
</script>
